import React, { useState, useEffect } from 'react';
import { View } from '@tarojs/components';
import './index.scss';

// 模拟日记数据类型
interface Diary {
  id: number;
  title: string;
  content: string;
  createTime: string;
}

const MinePage: React.FC = () => {
  const [diaries, setDiaries] = useState<Diary[]>([]);
  const [loading, setLoading] = useState(true);

  // 模拟加载数据
  useEffect(() => {
    setTimeout(() => {
      setDiaries([
        {
          id: 1,
          title: '今天的心情',
          content: '今天天气很好，心情也很不错。早上起来看到阳光洒在窗台上，感觉一切都充满了希望。决定今天要好好享受这美好的一天，去公园走走，感受一下大自然的美好。',
          createTime: '2024-06-15'
        },
        {
          id: 2,
          title: '周末计划',
          content: '这个周末想要做点什么有意义的事情。可能会去图书馆看书，或者和朋友一起去看电影。最近工作比较忙，需要好好放松一下。',
          createTime: '2024-06-14'
        },
        {
          id: 3,
          title: '工作感想',
          content: '最近在工作中学到了很多新的知识，虽然有时候会觉得压力比较大，但是看到自己的进步还是很开心的。同事们都很友善，工作氛围也不错。',
          createTime: '2024-06-13'
        },
        {
          id: 4,
          title: '美食体验',
          content: '今天尝试了一家新的餐厅，味道出乎意料的好。特别是那道招牌菜，真的让人印象深刻。下次一定要带朋友一起来尝试。',
          createTime: '2024-06-12'
        },
        {
          id: 5,
          title: '读书笔记',
          content: '最近在读一本关于心理学的书，里面的观点很有启发性。让我对人性有了更深的理解，也让我重新审视了自己的一些行为和想法。',
          createTime: '2024-06-11'
        }
      ]);
      setLoading(false);
    }, 1000);
  }, []);

  // 删除日记
  const handleDelete = (id: number) => {
    setDiaries(diaries.filter(diary => diary.id !== id));
  };

  // 格式化日期
  const formatDate = (dateStr: string) => {
    const date = new Date(dateStr);
    return `${date.getMonth() + 1}月${date.getDate()}日`;
  };

  // 计算字数
  const getWordCount = (content: string) => {
    return content.length;
  };

  return (
    <View className="mine-page">
      <View className="header">
        <View className="title">我的日记</View>
      </View>
      
      <View className="content">
        {loading ? (
          <View className="loading">
            <View className="text">加载中...</View>
          </View>
        ) : diaries.length === 0 ? (
          <View className="empty-state">
            <View className="icon">📝</View>
            <View className="title">还没有日记</View>
            <View className="desc">快去写下你的第一篇日记吧</View>
          </View>
        ) : (
          <View className="diary-list">
            {diaries.map(diary => (
              <View key={diary.id} className="diary-item">
                <View className="item-header">
                  <View className="title">{diary.title}</View>
                  <View className="delete-btn" onClick={() => handleDelete(diary.id)}>
                    🗑️
                  </View>
                </View>
                <View className="meta">
                  <View className="date">{formatDate(diary.createTime)}</View>
                  <View className="word-count">{getWordCount(diary.content)}字</View>
                </View>
                <View className="preview">{diary.content}</View>
              </View>
            ))}
          </View>
        )}
      </View>
    </View>
  );
};

export default MinePage; 